<template>
  <el-menu
      class="categories"
      default-active="0"
      @select="handleSelect"
      active-text-color="#409EFF">
    <router-link to="/doctorInfo"><!--跳转回本页-->
      <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">全部</span>
      </el-menu-item>
    </router-link>
    <el-submenu default-active="Index"
                :index="item.department"
                v-for="item in departments"
                @select="handleSelect">
      <template slot="title">
        <i class="el-icon-menu"/>
        <span slot="title">{{item.department}}</span>
      </template>
      <el-menu-item v-for="child in item.children"
                    :index="child.department">
        <template slot="title">
          <i class="el-icon-menu"/>
          <span slot="title">{{child.department}}</span>
        </template>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "SideMenu",
  data(){
    return {
      departments: [
        {
          departmentId: 0,
          department: '',
          parentDepart: 0,
          introduction: '',
          children: [
            {
              departmentId: 0,
              department: '',
              parentDepart: '',
              introduction: ''
            }
          ]
        },
      ],
      departName: '',
    }
  },created(){
    this.getDepartmentList();
  },
  methods: {
    getDepartmentList(){
      const self = this;
      this.$axios.get('api/department/getDepartmentList').then(res=>{
        self.departments = res.data.data;

      }).catch(err => {console.log(err)});

    },handleSelect(key, keyPath){

        this.departName = key;
        this.$emit('selectIndex');

    }
  }

}
</script>

<style scoped>
  .categories {
    position: fixed;
    margin-left: 50%;
    left: -600px;
    top: 100px;
    width: 200px;
    height: 500px;
    overflow-y: auto;

  }
  /* 隐藏连接下划线*/
  a{
    text-decoration:none;
  }

  .categories::-webkit-scrollbar {
    display: none;
  }
</style>